import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import { BrowserRouter,Link,Route,Router,HashRouter,Switch } from 'react-router-dom';

import 'font-awesome/css/font-awesome.min.css' 
import './index.css'
import './index.scss'

class A extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>Component A
        <Switch>
          <Route 
              exact//完全匹配
              path={`${this.props.match.path}`} 
              render={(route) => {
              return <div>无参数</div>
            }}>
          </Route>
          <Route
              path={`${this.props.match.path}/sub`} 
              render={(route) => {
              return <div>sub</div>
            }}>
          </Route>
          <Route
              path={`${this.props.match.path}/:id`} 
              render={(route) => {
              return <div>有参数：{route.match.params.id}</div>
            }}>
          </Route>
         
          
        </Switch>
      </div>
    
    )
  }
}
class B extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>Component B</div>
    )
  }
}
class Wrapper extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        <Link to='/a'>组件A</Link>
        <br></br>
        <Link to='/b'>组件B</Link>
        <br></br>
        <Link to='/a/123'>组件A带参数</Link>
        <br></br>
        <Link to='/a/sub'>组件sub</Link>
        {this.props.children}
      </div>
    )
  }
}

ReactDOM.render(
  <BrowserRouter>
    <Wrapper>
      <Route path='/a' component={A}></Route>
      <Route path='/b' component={B}></Route>
    </Wrapper>
  </BrowserRouter>,
  document.getElementById('app')
)


